<template>
  <div>
    <fieldset>
      <legend>计算属性</legend>
      姓氏： <input type="text" v-model="user.firstName" /> <br />
      名字： <input type="text" v-model="user.lastName" /> <br />
      姓名： <input type="text" v-model="userName" />
      {{ userName }}
    </fieldset>
  </div>
</template>
<script>
export default {
  // 定义变量的地方
  data() {
    return {
      user: {
        firstName: "诸葛",
        lastName: "孔明",
      },
    };
  },
  // 存放函数的地方
  methods: {},
  // 存放的函数必须有return,并且不能放异步函数。计算类的函数放到里面
  // 监听依赖变化的特点,当依赖数据发生改变的时候,跟他相关的数据也会发生改变
  computed: {
    // 基本语法，他只会触发get，不会触发set所以导致报错
    b(){
      return "hello"
    },
    // 复杂的语法
    userName:{
      // 获取的时候触发get函数
      get(){
        return this.user.firstName+"-"+this.user.lastName
      },
      // 当修改的时候会触发set函数,会默认接收一个参数，这个参数就是你修改后的数据
      set(value){
        console.log("监听数据的变化")
        this.user.firstName=value.split("-")[0]
        this.user.lastName=value.split("-")[1]
      }
    }
  },
};
// 计算属性作用:
// ***可以将函数当作变量去使用,从而能够使用v-model这个指令,并且不会影响到原数据
// 计算属性可以监听数据的变化,当数据发生改变的时候干个什么事情 --- watch
// 计算属性主要是计算的,关于计算类型的函数可以使用计算属性 --- 普通函数
</script>